<html>
<head>
<script type="text/javascript">
	function showUser(str) {
		if (str == "") {
			document.getElementById("txtHint").innerHTML = "";
			return;
		}

		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {
				if( xmlhttp.readyState == 4){
				    var persons = eval('(' + xmlhttp.responseText + ')');
				    document.getElementById("txtHint").innerHTML += "<li>";
				    for(var i = 0; i< persons.length; i++){
					    document.getElementById("txtHint").innerHTML += persons[i].FirstName;
				    }
				    document.getElementById("txtHint").innerHTML += "</li>";
				}
		};

		xmlhttp.open("GET",
				"http://128.233.110.147:8888/testDB/getuser.php?q=Peter Griffin",
				true);
		xmlhttp.send();
	}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
<li><a href="insert.html">Page Two</a></li>
<li><a href="insert_product.html">Insert Product Information</a></li>
</body>
</html>